<template>
  <div>
    <WrsDialog :visible="dialogVisible" :footer="false" width="1200px" title="暂停复水" @cancel="dialogVisible=false">
      <template #dialog>
        <div class="suspendWater">
          <!-- <div> -->
          <a-form layout="vertical" :model="form" ref="suspendWaterForm">
            <div class="title">基本信息</div>
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="所属区域" name="areaName">
                  <a-input v-model:value="form.areaName" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="客户编号" name="customerNo">
                  <a-input v-model:value="form.customerNo" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="客户名称" name="customerName">
                  <a-input v-model:value="form.customerName" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="客户地址" name="customerAddress">
                  <a-input v-model:value="form.customerAddress" :disabled="true" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>



          <div class="title" style="padding-bottom: 0">暂停信息</div>
          <WrsTable :rowSelection="rowSelection" :row-key="record => record.no" style="margin-top: 0"
            :dataSource="table.dataSource" :columns="table.columns" :scroll="{ x: 1500, y: 500 }" :showSelection="true">
          </WrsTable>
        </div>
      </template>
      <template #foot1>
        <a-button @click="confirm('save')">暂存</a-button>
        <a-button @click="confirm('commit')" type="primary">提交</a-button>
      </template>
    </WrsDialog>
  </div>
</template>
<script setup>
import WrsTable from "@/components/WrsTable/index.vue";
import WrsDialog from "@/components/WrsDialog/index.vue";
// import {
//   customerBusiLoadApi,
//   customerBusiQueryApi,
//   customerBusiSaveApi,
//   customerBusiCommitApi,
// } from "@/api/api.js";
import { reactive, h, ref, watch, defineExpose } from "vue";
const dialogVisible = ref(true);
const companyAreaList = ref([]);
const suspendWaterForm = ref();
const rowSelection = reactive({
  selectedRowKeys: [],
  onChange(keys, selectedRows) {
    console.log(keys, selectedRows)
    rowSelection.selectedRow = selectedRows;
    rowSelection.selectedRowKeys = keys;
  },
  getCheckboxProps: (record) => ({
    disabled: record.no == 123123
  })
});
const table = reactive({
  dataSource: [
    {
      no: 123123
    },
    {
      no: 456456
    }
  ],
  columns: [
    {
      title: "表卡编号",
      dataIndex: "no",
    },
    {
      title: "安装地址",
      dataIndex: "checkbackNo",
    },
    {
      title: "计费标志",
      dataIndex: "transactionNum",
    },
    {
      title: "用水性质",
      dataIndex: "transactionAmount",
    },
    {
      title: "表卡状态",
      dataIndex: "checkbackDate",
    },
    {
      title: "水表状态",
      dataIndex: "checkbackNo",
    },
    {
      title: "阀门状态",
      dataIndex: "transactionNum",
    },
    {
      title: "水表编码",
      dataIndex: "transactionAmount",
    },
    {
      title: "水表类型",
      dataIndex: "checkbackDate",
    },
    {
      title: "水表口径",
      dataIndex: "checkbackNo",
    },
    {
      title: "水表厂家",
      dataIndex: "transactionNum",
    },
    {
      title: "IMEI",
      dataIndex: "transactionAmount",
    },
    {
      title: "最新读数",
      dataIndex: "transactionAmount",
    },
  ],
});
const form = reactive({
  areaName: "区域",
  customerNo: "123",
  customerName: "名称",
  customerAddress: "杭州",
});
const busiType = 10;
const modalInit = async () => {
  let params = {
    busiType,
    customerNo: 198055,
  };
  dialogVisible.value = true;
};
const confirm = async (type) => {
  let params = {
    busiType,
    busiId: type == "commit" ? busiId.value : undefined,
    ...result.value,
  };
  console.log("发送数据：", params);
  // if (type == "commit") {
  //   await customerBusiCommitApi(params);
  // }
  // if (type == "save") {
  //   const res = await customerBusiSaveApi(params);
  //   busiId.value = res;
  // }
};
defineExpose({
  modalInit,
});
</script>
<style lang='less' scoped>
.suspendWater {
  .line {
    border-bottom: 2px solid #edecec;
    width: 100%;
    margin: 10px;
  }

  .title {
    font-size: 15px;
    padding: 10px 0;
    font-weight: 600;
  }
}
</style>